{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}Menus{% endblock %}
{% block content %}
<div class="with-padding">
    <div class="columns">
    
        <!-- First row -->
        {% for area, data in menus %}
        <div class="{% if loop.index is odd %}new-row{% endif %} six-columns">
        <a data-area="{{ area }}" href="#" class="button margin-bottom add_menu_item">Add item to <b>{{ area }}</b></a>
            <div class="carbon with-padding margin-bottom">
                <div class="boxed white-bg">
                    <ol class="sortable" max-depth="{{ data.depth }}" id="{{ area }}">
                    	{{ tpl_menu_list(data.items) }}              
                    </ol>        
                </div>
            </div>       
        </div>
        {% endfor %}
    	
        <!-- Second row -->
        <div class="new-row six-columns">
        <ul class="bullet-list">
            <li><small class="tag red-bg">Default</small> This is the default welcome page displayed on {{ site_url() }}</li>
            <li><small class="tag blue-bg">BLANK</small> A blank item, this does not link to anywhere</li>
            <li><small class="tag blue-bg">URL: {url}</small> Links to a specifick url.</li>
            <li><small class="tag blue-bg">PAGE: {name}</small> Links to the page specified with {name}</li>    
		</ul>        
        </div>

        
    </div>	
</div>
<form id="add_menu_item" action="{{ cms_url('menus/add') }}" method="post" style="display:none">
    <input type="hidden" name="menu_area" value="0" />
    <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />            
</form>        

        <style type="text/css">.placeholder {
			background-color: #cfcfcf;
		}
ol {
			margin: 0;
			padding: 0;
			padding-left: 30px;
			
		}

		ol.sortable, ol.sortable ol {
			margin: 5px 0 0 30px;
			padding: 0;
			list-style-type: none;
		}

		ol.sortable {
			margin: 2px 0;
		}

		.sortable li {
			margin: 5px 0 0 0;
			padding: 0;
		}

		.sortable li div  {
			font-size:16px;
			line-height:20px;
			height:25px;
			cursor: move;
			padding-left:20px;
		}
</style>

{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>
	<script src="{{ javascript_path }}developr.modal.js"></script>

	<script src="{{ javascript_path }}libs/jquery.nestedSortable.js"></script>


<script type="text/javascript">
$(function(){
	
	// Add menu item
	$('.add_menu_item').click(function(e) {
		e.preventDefault();
		var form = $('#add_menu_item');
		form.find('[name=menu_area]').val( $(this).data("area") );
		form.submit();			
	});

	// Sortable with update		
	$('ol.sortable').each(function(){
		var $sortable = $(this);
		var max_depth = $sortable.attr('max-depth');
		$sortable.nestedSortable({
			disableNesting: 'no-nest',
			forcePlaceholderSize: true,
			handle: 'div',
			helper:	'clone',
			items: 'li',
			maxLevels: max_depth,
			opacity: .6,
			placeholder: 'placeholder',
			revert: 250,
			tabSize: 25,
			tolerance: 'pointer',
			toleranceElement: '> div',
			update: function(event, ui)
			{
                var array = $(this).nestedSortable('toArray', {startDepthCount: 0});
                $.post('{{ cms_uri }}/menus/sort', { 
                    sortdata : array,
                    area: $sortable.attr('id'),
                    '{{ csrf_token }}': '{{ csrf_hash }}' 
                }, function(data){  
                    notify('Menu sorted', 'The menu items are sorted and nested',{
                                                icon: '{{ image_path }}demo/picto.png',
                                                showCloseOnHover: false
                                            });             
                });
			}
		});
		
		$sortable.parent().parent().find('a.addItem').click(function(e){
			e.preventDefault();
			//location.href = '<?=site_url("backend/menus/add")?>/' + $(this).attr('id');
		});
	});
});
</script>	

{% endblock %}

</body>
</html>